<template>
    <div class="cart_page">
        <van-sticky>
            <Tips />
        </van-sticky>
        <van-checkbox-group v-model="result">
            <van-checkbox :name="item.product_id" v-for="item in cartList" :key="item.id" @click="checkboxClick(item)">
                <van-swipe-cell>
                    <van-card :num="item.number" :price="item.market_price.toFixed(2)" :title="item.goods_name"
                        :thumb="item.list_pic_url" @click.stop="toDetails(item.goods_id)">
                        <template #footer>
                            <van-stepper v-show="editStatus" v-model="item.number" min="1" max="100" integer
                                @plus="preBubbling" @minus="preBubbling" @overlimit="preBubbling" @focus="preBubbling"
                                @change="stepChange(item)" @blur="preBubbling" />
                        </template>
                    </van-card>
                    <template #right>
                        <van-button square text="删除" type="danger" class="delete-button"
                            @click="delGoodsFn(item.product_id)" />
                    </template>
                </van-swipe-cell>
            </van-checkbox>
        </van-checkbox-group>

        <van-submit-bar :price="cartTotal.checkedGoodsAmount*100" button-text="提交订单" @submit="onSubmit">
            <van-checkbox v-model="quanxuan">全选</van-checkbox>
            <van-button type="danger" size="small" @click="DelEditFn" class="delbtn" v-show="editStatus">删除选中
            </van-button>
            <template #tip>
                累计共{{result.length}}件商品，可点击
                <van-button :type="editStatus?'primary':'info'" size="small" @click="editFn">
                    {{editStatus?'完成编辑':'编辑'}}</van-button>
                按钮进行商品数量修改
            </template>
        </van-submit-bar>
    </div>
</template>

<script>
    import {
        CartDataApi,
        GoodsSelectApi,
        CartDeleteApi,
        CartUpdateApi
    } from '../request/api'
    import Tips from '@/components/Tips.vue'
    export default {
        computed: {
            // 全选checkbox的值
            quanxuan: {
                get() {
                    // 获取这个quanxuan字段的值
                    return this.cartTotal.checkedGoodsCount == this.cartTotal.goodsCount;
                },
                set(val) {
                    // 当这个值修改的时候，你要去做什么
                    // console.log(val); // true/false
                    // result是已经被你选中的结果

                    // 重新提取整个cartList数组的product_id,拼成一个id数组
                    let arr = [];
                    this.cartList.map((item) => {
                        arr.push(item.product_id);
                    });

                    // 切换全选状态，通过接口调用
                    GoodsSelectApi({
                        isChecked: val ? 1 : 0,
                        productIds: arr.join(),
                    }).then((res) => {
                        if (res.errno === 0) {
                            // 重新渲染当前页面的所有数据
                            this.successFn(res.data)
                        }
                    })
                }
            }
        },

        data() {
            return {
                // 复选框的选中值
                result: [],
                // 步进器的值
                stepNum: 0,
                // 商品列表
                cartList: [],
                // 编辑状态，默认为false
                editStatus: false,
                // 产品总数
                cartTotal: {},
            };
        },
        methods: {
            // 点击图片跳转详情页
            toDetails(id) {
                this.$router.push(`/detail/${id}`)
            },

            // 删除商品
            delGoodsFn(id) {
                CartDeleteApi({
                    productIds: id.toString()
                }).then(res => {
                    if (res.errno === 0) {
                        this.successFn(res.data)
                    }
                })
            },

            // 使用步进器更改产品数量
            stepChange(item) {
                event.stopPropagation(); // 阻止事件冒泡
                // console.log(item);

                CartUpdateApi({
                    productId: item.product_id,
                    id: item.id,
                    number: item.number,
                    goodsId: item.goods_id
                }).then(res => {
                    if (res.errno === 0) {
                        this.successFn(res.data)
                    }
                })
            },
            preBubbling() {
                event.stopPropagation(); // 阻止事件冒泡
            },
            onSubmit() {

            },
            onClickEditAddress() {

            },
            editFn() {
                // 要步进器取反
                this.editStatus = !this.editStatus
                // 处于编辑状态时，是红色
            },

            // 删除选中按钮
            DelEditFn() {
                // console.log(this.result);
                this.result.forEach(element => {
                    this.delGoodsFn(element)
                });
                this.editStatus = !this.editStatus
            },

            // 列表单向的点击
            checkboxClick(item) {
                console.log(111);
                console.log(this.result);
                // console.log(item);
                // console.log(this.cartTotal);
                /* if(item.checked==1){
                    item.checked=0
                }
                if(item.checked==0)
                    item.checked=1
                } */

                // if(!this.editStatus){
                //     // false 代表未处于编辑状态

                // }
                GoodsSelectApi({
                    isChecked: item.checked == 1 ? 0 : 1,
                    productIds: item.product_id
                }).then(res => {
                    if (res.errno === 0) {
                        this.successFn(res.data)
                    }
                })
            },
            // 渲染页面的函数
            successFn(arg) {

                this.cartList = arg.cartList;
                this.cartTotal = arg.cartTotal;
                this.result = []; // 清空result
                // cartList数组中，每一项的checked只要等于1，就选中该项 [result]
                // result数组中的值其实是每一项的id
                // cartList数组中，某一项的checked为1，那么这一项的id就应该被放到result中去
                this.cartList.map((item) => {
                    if (item.checked === 1) {
                        this.result.push(item.product_id)
                    }
                });
            }
        },
        components: {
            Tips
        },
        created() {
            //         $(document).ready(function(){
            //     $(window).scrollTop(0)
            //   })
            CartDataApi().then((res) => {
                console.log(res.data)
                if (res.errno === 0) {
                    this.successFn(res.data)
                    // console.log(this.cartList);
                }
            })
        }
    }
</script>

<style lang="less" scoped>
    .cart_page {
        padding-bottom: 160px;

        .delete-button {
            height: 100%;
        }

        .delbtn {
            margin-left: 5px;
            border-radius: 5px;
        }

        .van-submit-bar {
            bottom: 50px;

            .van-submit-bar__tip {
                display: flex;
                align-items: center;
            }
        }

        /deep/.van-checkbox-group {
            background: #fff;
            padding: 0 10px;

            .van-checkbox {
                border-bottom: 1px solid #ccc;
                background: #fff;
                padding: 10px 0;

                .van-checkbox__label {
                    flex: 1;

                    .van-card {
                        position: relative;
                        box-sizing: border-box;
                        padding: 8px 16px;
                        color: #323233;
                        font-size: 12px;
                        background-color: #fafafa;
                        margin-left: 20px;

                        .van-card__content {
                            position: relative;
                            display: -webkit-box;
                            display: -webkit-flex;
                            display: flex;
                            -webkit-box-flex: 1;
                            -webkit-flex: 1;
                            flex: 1;
                            -webkit-box-orient: vertical;
                            -webkit-box-direction: normal;
                            -webkit-flex-direction: column;
                            flex-direction: column;
                            -webkit-box-pack: justify;
                            -webkit-justify-content: space-between;
                            justify-content: space-between;
                            min-width: 0;
                            min-height: 88px;

                            .van-card__title {
                                font-size: 18px;
                                margin-top: 20px;
                                max-height: 32px;
                                font-weight: 500;
                                line-height: 16px;
                            }

                            .van-card__bottom {
                                line-height: 20px;
                            }
                        }
                    }
                }
            }
        }

        .van-submit-bar {
            bottom: 50px;

            .van-submit-bar__tip {
                display: flex;
                align-items: center;

                .van-button {
                    margin: 0 5px;
                }
            }
        }
    }
</style>